<template>
    <div class = "app">
        <div class = "box">
            <div class = "add">
                <aside>
                    发货信息：
                </aside>
                <article>   
                    <p>
                        <span>{{ Shop.ship_name }}</span>
                        <span>{{ Shop.ship_mobile}}</span>
                    </p>
                    <p>
                        <span>地址</span>
                        <span>{{ Shop.ship_area_name }}</span>
                    </p>
                </article>
            </div>
            <div class = "img_box">
                <div class = "img">
                    <img :src="Shop.items[0].image_url" alt="">
                </div>
                <aside>
                    <p>
                        {{ Shop.items[0].addon }}
                    </p>
                    <p>
                        ￥<span>{{ Shop.items[0].amount }}</span>
                    </p>
                    <p>
                        {{ Shop.items[0].name }}
                    </p>
                </aside>
            </div>
        </div>
        <div class = "submit" 
            @click="getShop"
        >
            去支付
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            Shop:[],
            num:null,
        }
    },
    created(){
        this.Shop = JSON.parse(localStorage.getItem('pay'));
        console.log(this.Shop)
        this.num = this.Shop.order_id
    },
    methods:{
        getShop(){
            this.$router.replace({path: '/cashierdesk', query: {id:this.num, type: 1}})
        }
    }
}
</script>

<style lang="scss" scoped>
    .app{
        width:100%;
        height:auto;
        .box{
            text-align: left;
            .add{
                height:50px;
                display: flex;
                margin-top:10px;
                padding:0px 10px;
                background:#fff;
                aside{
                    line-height:50px;
                    margin-right:20px;
                }
                article{
                    padding-top:5px;
                    font-size:12px;
                    color:#323232;
                    p{
                        margin-bottom:10px;
                        span{
                            padding:0px 20px;
                        }
                    }
                }
            }
            .img_box{
                margin-top:10px;
                overflow: hidden;
                height:100px;
                padding:10px;
                background:#fff;
                display: flex;
                .img{
                    height:80px;
                    width:80px;
                    display: flex;
                    margin-right:20px;
                    img{
                        height:100%;
                        width:100%;
                    }
                }
                aside{
                    p{
                        margin-bottom:5px;
                        span{
                            color:red;
                        }
                    }
                }
            }
        }
        .submit{
            padding:5px;
            float: right;
            margin-top:5px;
            margin-right:10px;
            border:1px solid #c13333;
            border-radius: 10px;
            color:#c13333;
        }        
    }
</style>

